<template>
    <div>
        <el-container class="form-container">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>数据源管理</span>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;margin-left:10px" @click="handlerSubmitForm">保存</el-button>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;" @click="testConnection">测试连接</el-button>
                </div>
                <div>
                    <el-form  :rules="rules"  ref="form"  :model="form" size="small" label-width="120px">
                        <el-row>
                        <el-col :span="12">
                            <el-form-item  label="链接名称"  prop="fdName">
                                <el-input class="input" v-model="form.fdName"  ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item  label="key" required prop="fdKey">
                                <el-input class="input" v-model="form.fdKey" required ></el-input>
                            </el-form-item>
                        </el-col>
                        </el-row>
                        <el-row>
                        <el-col :span="24">
                            <el-form-item  label="数据库类型" required prop="fdDbType">
                                <el-select v-model="form.fdDbType" @change="handlerSelectDataBase">
                                    <el-option
                                        v-for="item in dbSourceList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                </el-select >
                            </el-form-item>
                        </el-col>
                        </el-row>
                        <el-row>
                        <el-col :span="12">
                            <el-form-item  label="驱动" required prop="fdDbDriver">
                                <el-input class="input" v-model="form.fdDbDriver" required ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item  label="url" required prop="fdDbUrl">
                                <el-input class="input" v-model="form.fdDbUrl" required ></el-input>
                            </el-form-item>
                        </el-col>
                        </el-row>
                        <el-row>
                        
                        <el-col :span="12">
                            <el-form-item  label="用户名" required prop="fdUsername">
                                <el-input class="input" v-model="form.fdUsername" required ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item  label="密码" required prop="fdPassword">
                                <el-input class="input" v-model="form.fdPassword" required ></el-input>
                            </el-form-item>
                        </el-col>
                        </el-row>
                        <el-row>
                        <el-col :span="24">
                            <el-form-item  label="备注"  prop="fdRemark">
                                <el-input class="input" type="textarea" v-model="form.fdRemark"  ></el-input>
                            </el-form-item>
                        </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-card>
        </el-container>
    </div>
</template>
<script>
import {edit,parentEdit} from '@/components/mixins/form'
import {dbSourceConfig} from './dbConfig';
import formUtils from '@/utils/formUtils';
export default {
    name: "sysDataSourceMainEdit",
    components: {
    },
    data() {
        return {
            updateUrl:'/api/sys/datasource/sys_data_source_main',
            fetchUrl:'/api/sys/datasource/sys_data_source_main',
            fetchParentUrl:'/api/sys/datasource/sys_data_source_main',
            form: {
                fdId:'',
                fdCreateTime:'',
                fdName:'',
                fdRemark:'',
                fdKey:'',
                fdDbType:'',
                fdDbUrl:'',
                fdDbDriver:'',
                fdUsername:'',
                fdPassword:''
            },
            rules:{
                fdCreateTime :[{required: true, message: '请输入创建时间', trigger: 'blur'}],
                fdKey :[{required: true, message: '请输入唯一值', trigger: 'blur'}],
                fdDbType :[{required: true, message: '请输入数据库类型', trigger: 'blur'}],
                fdDbUrl :[{required: true, message: '请输入数据库链接url', trigger: 'blur'}],
                fdDbDriver :[{required: true, message: '请输入数据库驱动', trigger: 'blur'}],
                fdUsername :[{required: true, message: '请输入用户名', trigger: 'blur'}],
                fdPassword :[{required: true, message: '请输入密码', trigger: 'blur'}]
	        }
        }
    },
    mixins:[edit,parentEdit],
    mounted(){
        this.$nextTick(()=>{
            
        })
    },
    methods:{
        handlerSelectDataBase(val){
            const index = dbSourceConfig.findIndex(item=>item.fdType===val);
            const dbSource = dbSourceConfig[index];
            this.form.fdDbUrl = dbSource.fdUrl;
            this.form.fdDbDriver = dbSource.fdDriver;
        },
        testConnection(){
            let forms = formUtils.convertToModel(this.form);
            this.$post('/api/sys/datasource/sys_data_source_main/testConnection',forms).then((res) => {
                if(res.status==1&&res.data.testFlag){
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }else{
                    this.$message.error(res.data.msg);
                }
            })
        }
    },
    computed:{
        dbSourceList(){
            let sourceList = [];
            dbSourceConfig.map(item=>{
                const option = {"label":item.fdType,"value":item.fdType};
                sourceList.push(option);
            })
           return sourceList;
        }
    }
}
</script>
<style scoped>
@import "~@/assets/css/form.css";
</style>